<template>
	<view class="container">
		<!-- <custom-header title="本地提取文案" show-bg-color show-back v-if="pageFrom === 'index'" /> -->
		<view class="layout">
			<view class="upload-layout" v-if="pageFrom === 'index'">
				<view class="title">上传文件<text class="sub-title">*仅支持50M以下的视频</text></view>
				<view class="file" v-if="chooseFile && filename">
					<view class="name">{{ filename }}</view>
					<view class="status">{{ filename ? '上传完成' : '上传中' }}</view>
				</view>
				<view class="file-box" v-if="!chooseFile">
					<view class="title">上传完好的内容，支持上传格式为：mp3、wav、m4a、3gp、pcm、amr、wma、aac、mp4、avi、rm、rmvb、mov、m4v、mkv</view>
					<view class="btn">
						<image class="icon" src="/static/images/icon_upload.png"></image>
						<view class="text" @click="onUploadClick">上传本地文件</view>
					</view>
				</view>
				<view class="video" v-if="filePath">
					<video id="myVideo" class="cover" :src="filePath" @error="error" controls></video>
				</view>
				<view>
					<radio-group @change="radioChange($event,item)">
						<label class="radio">
							<radio value="fast" :checked="true" />转写通道1（快速）
						</label>
						<label class="radio" style="float: right;">
							<radio value="precise" />转写通道2（精准）
						</label>
					</radio-group>
				</view>
				<view class="btn-group">
					<view :class="['btn', chooseFile ? 'active' : '']" @click="chooseFile ? onExtractClick() : null">开始解析</view>
					<view :class="['btn', chooseFile ? 'reset' : '']" @click="chooseFile ? onReUpload() : null">重新上传</view>
				</view>
			</view>
			<extract-layout :task-id="taskId" v-show="pageFrom === 'history'" />
		</view>
	</view>
</template>

<script setup>
	import { ref, nextTick } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { extractTextWithLocalVideo, checkId } from '../../utils/api';
	
	const chooseFile = ref(false);
	const filePath = ref(null);
	const filename = ref(null);
	const taskId = ref(null);
	const pageFrom = ref('index'); // 页面来源
	let thoroughfare = ref('fast'); // 通道
	const limitByte = 50*1024*1024; // 上传视频最大字节限制
	
	const onExtractClick = async () => {
		const userInfo = JSON.parse(uni.getStorageSync("userInfo"));
		const userId = userInfo.id;
		const { data } = await checkId({
			userId,
			type: 1,
		}); 
		if (data.valid) {
			//在有效期内
			onExtractText();
		} else {
			uni.showModal({
				// title: data.message,
				content: '暂无可用时间，请联系客服购买兑换码',
				showCancel: false,
				success: function(res) {
					if (res.confirm) {
						uni.navigateBack()
					}
				}
			})
		}
	}
	
	const onExtractText = async () => {
		uni.showLoading({
			title: '处理中'
		})
		const { success, message, data } = await extractTextWithLocalVideo({filePath: filePath.value})
		if (success) {
			// taskId.value = data.taskId;
			// filename.value = data.filename;
			uni.hideLoading();
			uni.showModal({
				title: '提交成功',
				content: '稍后可在我的-历史记录里查看结果',
				showCancel: false,
				success: function(res) {
					if (res.confirm) {
						// uni.navigateBack()
						uni.setStorageSync('tabInfo', 2);
						nextTick(() => {
						  uni.switchTab({
						    url: '/pages/extract_record/extract_record',
						  })
						})
					}
				}
			})
		} else {
			uni.showToast({
				title: message,
				icon: 'none',
				duration: 5000,
			})
		}
	}
	const onReUpload = () => {
		onUploadClick();
	}
	
	// 上传视频
	const onUploadClick = () => {
		uni.chooseVideo({
			sourceType: ['album'],
			compressed: true,
			success: async (res) => {
				console.log(res);
				console.log(limitByte);
				let { errMsg, tempFilePath, size } = res;
				if (errMsg == "chooseVideo:ok") {
					if (size > limitByte) {
						uni.showToast({
							title: '请选择50M以下的视频',
							icon: 'none'
						})
					} else {
						chooseFile.value = true;
						filePath.value = tempFilePath;
					}
				} else {
					uni.showToast({
						title: errMsg,
						icon: 'none'
					})
				}
			}
		})
	}
	
	const radioChange = (e) => {
		thoroughfare.value = e.detail.value;
	}
	
	onLoad((e) => {
		pageFrom.value = e.pageFrom;
		if (e.pageFrom === 'history') {
			taskId.value = e.taskId
		}
	})
	
	const error = (e) => {
		console.error('live-player error:', e.detail.errMsg)
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100vw;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		background-color: #F3F8FF;
		.layout {
			width: 100%;
			padding: 24rpx 48rpx;
			display: flex;
			flex-direction: column;
			gap: 24rpx;
			.upload-layout {
				min-height: 414rpx;
				background-color: white;
				border-radius: 12rpx;
				padding: 36rpx 24rpx;
				.title {
					font-size: 36rpx;
					font-weight: bold;
					color: #333;
					.sub-title {
						font-weight: normal;
						color: red;
						font-size: 24rpx;
						margin-left: 14rpx;
					}
				}
				.file {
					margin-top: 32rpx;
					height: 92rpx;
					border: 1rpx solid #E4E7EC;
					border-radius: 8rpx;
					padding: 0 18rpx 0 24rpx;
					display: flex;
					align-items: center;
					gap: 24rpx;
					font-size: 28rpx;line-height: 28rpx;font-weight: 400;
					.name {color: #333;flex: 1;overflow: hidden; white-space: nowrap;text-overflow: ellipsis;}
					.status {color:#999;}
				}
				.file-box {
					margin-top: 32rpx;
					height: 178rpx;
					background-color: #F8F9FD;
					border-radius: 8rpx;
					border: 1rpx solid #E4E7EC;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					gap: 24rpx;
					padding: 0 16rpx;
					.title {color: #999;font-size: 18rpx;line-height: 18rpx;font-weight: 400;}
					.btn {
						width: 238rpx;
						height: 64rpx;
						background-color: white;
						border-radius: 8rpx;
						border: 1rpx solid #E4E7EC;
						display: flex;
						align-items: center;
						justify-content: center;
						gap: 15rpx;
						color: #333;
						font-size: 24rpx;
						line-height: 24rpx;
						font-weight: 400;
						.icon {width: 22rpx; height: 22rpx;}
					}
				}
				.video {
					margin-top: 32rpx;
					height: 280rpx;
					background-color: #333;
					position: relative;
					z-index: 1;
					.cover {
						width: 100%;
						height: 100%;
						position: relative;
						z-index: 0;
					}
				}
				.btn-group {
					margin-top: 24rpx;
					display: flex;
					gap: 24rpx;
					align-items: center;
					justify-content: center;
					.btn {
						width: 217rpx;
						height: 72rpx;
						color: white;
						font-size: 28rpx;
						font-weight: 400;
						background-color: #AAB2C3;
						border-radius: 8rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}
					.active {
						background: #0051FE;
					}
					.reset {
						background: #F3F8FF;
						color: #0051FE;
					}
				}
				
			}
			.radio {
				font-size: 24upx;
				color: #333333;
				display: inline-block;
				margin: 32upx 0;
			
				:deep(radio .wx-radio-input) {
					width: 28upx;
					height: 28upx;
					background: #FFFFFF;
					border-radius: 50%;
					border: 1px solid #9DC5F2;
					margin-top: -4upx;
				}
			    :deep(radio .wx-radio-input-checked) {
					background: #fff !important;
					&::before {
						content: '';
						width: 18upx;
						height: 18upx;
						border-radius: 50%;
						margin: auto;
						background: #4DA1FE;
					}
				}
			}
		}
		
	}
	
</style>
